<script setup name="sucai">
import { ref, reactive, onMounted } from "vue";
import MyTreeList from "../../components/MyTreeList.vue";

const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
// 话术图片视频导航下标
const nowNavIndex = ref(0);

// 切换到话术
function toScript() {
  nowNavIndex.value = 0;
}

// 切换到话术
function toImg() {
  nowNavIndex.value = 1;
}

// 切换到话术
function toVideo() {
  nowNavIndex.value = 2;
}
</script>

<template>
  <div class="outer">
    <div class="left_menu_nav">
      <div class="top_nav">
        <div
          class="left_text"
          :class="{ active: nowNavIndex === 0 }"
          @click="toScript">
          话术
        </div>
        <div
          class="middle_text"
          :class="{ active: nowNavIndex === 1 }"
          @click="toImg">
          图片
        </div>
        <div
          class="right_text"
          :class="{ active: nowNavIndex === 2 }"
          @click="toVideo">
          视频
        </div>
      </div>
      <div class="bottom_nav">
        <MyTreeList :data="data"></MyTreeList>
      </div>
    </div>
    <div class="right_content"></div>
  </div>
</template>

<style scoped lang="scss">
.outer {
  padding: 0 20px;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
  .top_nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
    width: 230px;
    margin: 10px 0;
    color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    div {
      width: 33.3%;
      text-align: center;
      padding: 8px 0;
      border-radius: 8px;
      cursor: pointer;
    }
    .active {
      background-color: rgba(0, 196, 116, 1);
      transition: all 0.4s;
    }
  }
  .bottom_nav {
    margin-top: 2vh;
    height: 80vh;
  }
}
</style>
